/**
 * Created by spatra on 15-3-15.
 */
.project-show{
  position: relative;
}

.project-show .loading{
  opacity: 0.4;
}

.project-switch{
  top: 20%;
  left: 40%;
  position: absolute;
  z-index: 20;
}

.project-show .loading-info{
  position: relative;
  bottom: -4em;
  text-indent: 4em;
  color: #497fca;
}

/*-------------加载动画------------*/
.project-switch-animate {
  margin: 100px auto;
  width: 100px;
  position: relative;
}

.project-switch-animate .cube1, .project-switch-animate .cube2 {
  background-color: #497fca;
  width: 35px;
  height: 35px;
  position: absolute;
  top: 50%;
  left: 50%;

  -webkit-animation: projectcubemove 1.8s infinite ease-in-out;
  animation: projectcubemove 1.8s infinite ease-in-out;
}

.project-switch-animate .cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes projectcubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: rotate(-360deg) }
}

@keyframes projectcubemove {
  25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% {
      transform: translateX(42px) translateY(42px) rotate(-179deg);
      -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    } 50.1% {
        transform: translateX(42px) translateY(42px) rotate(-180deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
      } 75% {
          transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
          -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        } 100% {
            transform: rotate(-360deg);
            -webkit-transform: rotate(-360deg);
          }
}